﻿$(document).ready(function () {
    var cardDim = {
        width: 72,
        height: 95
    };

    function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
        if (typeof stroke == "undefined") {
            stroke = true;
        }
        if (typeof radius === "undefined") {
            radius = 5;
        }
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
        if (stroke) {
            ctx.stroke();
        }
        if (fill) {
            ctx.fill();
        }
    }

    function writeValue(context, value, colour) {
        context.beginPath();
        context.fillStyle = colour;
        context.font = "12px Verdana";
        context.fillText(value, 3, 12);
        context.fill();
        context.closePath();
    }

    function drawCard(fill) {
        if (typeof fill == "undefined") {
            fill = "#fff";
        }

        var canvasTemp = document.createElement("canvas"),
            tCtx = canvasTemp.getContext("2d");

        canvasTemp.width = cardDim.width;
        canvasTemp.height = cardDim.height;

        tCtx.save();
        tCtx.translate(canvasTemp.width, canvasTemp.height);
        tCtx.rotate(Math.PI);

        tCtx.fillStyle = fill;
        tCtx.beginPath();

        roundRect(tCtx, 0, 0, cardDim.width, cardDim.height, 5);
        tCtx.fill();

        tCtx.stroke();
        tCtx.closePath();
        

        return tCtx;
    }

    function drawCardFace(value, suit, red) {
        var cardColour = "#000";

        if (red) {
            cardColour = "#cc0000";
        }

        var context = drawCard();
        writeValue(context, value + suit, cardColour);

        context.restore();

        writeValue(context, value + suit, cardColour);

        context.beginPath();
        context.fillStyle = cardColour;
        context.font = "50px Verdana";
        context.textAlign = 'center';
        context.fillText(value, cardDim.width / 2, (cardDim.height / 2) + 17);
        context.fill();

        return context;
    }

    $("canvas").each(function (index) {

        var canvas = $(this).get(0),
        ctx = canvas.getContext('2d');
        canvas.width = (cardDim.width * 2) + 10;
        canvas.height = cardDim.height;

        $(this).children("span").each(function (subIndex) {
            var value = $(this).text().substring(0, 1),
                suit = $(this).text().substring(1),
                red = false;

            switch (suit) {
                case '♦':
                    red = true;
                    break;
                case '♥':
                    red = true;
                    break;
            }
            if (index < 1) {
                if (subIndex == 0) {
                    ctx.drawImage(drawCardFace(value, suit, red).canvas, 0, 0);
                } else {
                    ctx.drawImage(drawCardFace(value, suit, red).canvas, 73, 0);
                }
            } else {
                $(this).parent().replaceWith("<img src='/Images/Cards/blueBack.png' width = '72' height='95' />&nbsp;<img src='/Images/Cards/blueBack.png' width = '72' height='95' />");
            }
        });
    });
});